<template>
	<view class="container-tab">
		<!-- 我的信息栏 -->
		<view class="title-background" >
			<view class="title-user">
				<view class="user-avatar user-item">	
					<image :src="avatarUrl" class="user-avatar-image" />
				</view>
				<view class="user-name user-item">
					<text>{{ `您好！${userName}` }}</text>
				</view>
				<view class="user-qrcode user-item" @tap="clickQRCode">
					<u-qrcode :size="28" backgroundColor="transparent" foregroundColor="#FFFFFF"
						:text="signQrCode" ref="userQr" />
				</view>

			</view>
			<view class="title-score uni-row">
				<text class="score-title">我的积分</text>
				<view class="score-number">{{ userScore }}积分</view>
				<button class="score-btn" @tap="scoreHandle">积分商城</button>
			</view>
		</view>
		<view class="glass-screen"></view>
		<!-- 我的报名 订单 -->
		<view class="order-box">
			<view class="box-title uni-flex">
				<view class="box-title-left">我的报名</view>
				<view class="box-title-order uni-flex" @tap="orderClick('all')">
					<text>全部订单</text>
					<text class="uni-icon arrow-image">&#xe470;</text>
				</view>
			</view>
			<view class="box-content uni-flex">
				<view class="uni-flex uni-column content-item" @tap="orderClick('pay')">
					<uni-badge class="uni-badge-left-margin" :text="unpaidCount" absolute="rightTop" size="small">
						<image class="box-image" src="../../../static/image/user/package.png"></image>
					</uni-badge>
					<view class="box-text">
						<text class="item-text">待缴费</text>
					</view>
				</view>
				<view class="uni-flex uni-column content-item" @tap="orderClick('registered')">
					<image class="box-image" src="../../../static/image/user/registered.png"></image>
					<view class="box-text">
						<text class="item-text">已报名</text>
					</view>
				</view>
				<view class="uni-flex uni-column content-item" @tap="orderClick('refund')">
					<image class="box-image" src="../../../static/image/user/refund.png"></image>
					<view class="box-text">
						<text class="item-text">已退款</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 菜单栏 -->
		<view class="menu-box">
			<view class="uni-flex uni-row menu-item" @tap="goCommunity">
				<image class="menu-icon" src="../../../static/image/user/community.png"></image>
				<text class="menu-text">我的社区</text>
				<text class="uni-icon menu-arrow">&#xe470;</text>
			</view>
			<view class="uni-flex uni-row menu-item" @tap="goTalents">
				<image class="menu-icon" src="../../../static/image/user/talents.png"></image>
				<text class="menu-text">成为社区达人</text>
				<image class="verify-icon" :src="verifyicon"></image>
				<text class="uni-icon menu-arrow">&#xe470;</text>
			</view>
			<view class="uni-flex uni-row menu-item" @tap="goQuestion">
				<image class="menu-icon" src="../../../static/image/user/question.png"></image>
				<text class="menu-text">问题反馈</text>
				<text class="uni-icon menu-arrow">&#xe470;</text>
			</view>
			<view class="uni-flex uni-row menu-item menu-item-last" @tap="goSetting">
				<image class="menu-icon" src="../../../static/image/user/setting.png"></image>
				<text class="menu-text">设置</text>
				<text class="uni-icon menu-arrow">&#xe470;</text>
			</view>
		</view>
		<!-- 二维码弹窗 -->
		<qr-modal :visible="visible" @close="closeModal" :signQrCode="signQrCode"></qr-modal>
	</view>

</template>

<script>
	import {personalCenter} from '@/http/api.js';
	
	export default {
		data() {
			return {
				avatarUrl: '', // 用户头像图片
				userName: '', // 用户名称
				QRCodeUrl: '', // 二维码图片
				unpaidCount: 0, // 待缴费数量
				signQrCode: '', // 签到二维码
				visible: false, // 签到二维码弹窗
				verifyicon:'',//达人认证状态图
				verifyresult:'',//达人认证
			}
		},
		created() {
			console.log('----onLoad---');
			const userInfo = this.$store.state.userInfo;
			if (userInfo) {
				this.avatarUrl = userInfo.avatarUrl
				this.userName = userInfo.nickName
			}
			this.getData();
		},
		methods: {
			getData(){
				this.getUserInfo();
				this.getScore();
			},
			// 获取个人中心数据 
			getUserInfo() {
				const userInfo = this.$store.state.userInfo
				if (userInfo) {
					this.avatarUrl = userInfo.avatarUrl
					this.userName = userInfo.nickName
				}
				this.$request({
					url: personalCenter
				}).then((res) => {
					this.unpaidCount = res.unpaidCount // 待缴费数量
					this.signQrCode = res.signQrCode // 签到二维码
					this.verifyresult=res.talentStatus;
					if(res.talentStatus.status==='UNAUTHORIZED'){
						this.verifyicon='';
					}else if(res.talentStatus.status==='AUTHENTICATING'){
						this.verifyicon='../../../static/image/user/verify.png';
					}else if(res.talentStatus.status==='AUTHENTICATION_SUCCESSFUL'){
						this.verifyicon='../../../static/image/user/successv.png';
					}else if(res.talentStatus.status==='AUTHENTICATION_FAILED'){
						this.verifyicon='../../../static/image/user/fail.png';
					}
				})
			},
			// 查看订单
			orderClick(type) {
				const param = {
					all: 0, // 全部
					pay: 1, // 待缴费
					registered: 2, // 已报名
					refund: 3 // 已退款
				}
				// 跳转到我的报名页面
				uni.navigateTo({
					url: `/pages/user/order/order?current=${param[type]}`
				});
			},
			// 点击设置跳转
			goSetting() {
				uni.navigateTo({
					url: '/pages/user/setting/setting'
				});
			},
			// 点击二维码
			clickQRCode() {
				// 弹出弹窗
				this.visible = true
			},
			// 关闭弹窗
			closeModal() {
				this.visible = false
			},
			// 我的社区（暂时没有功能）
			goCommunity() {
				uni.showToast({
					icon: 'none',
					title: '功能正在开发中'
				})
			},
			// 问题返回（暂时没有功能）
			goQuestion() {
				uni.showToast({
					icon: 'none',
					title: '功能正在开发中'
				})
			},
			// 积分商城
			scoreHandle(){
				uni.showToast({
					icon: 'none',
					title: '功能正在开发中'
				})
			},
			goTalents(){
				uni.navigateTo({
					url: '/pages/betalents/index?verifyresult='+encodeURIComponent(JSON.stringify(this.verifyresult)),
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>
